<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript" src="<%=request.getContextPath()%>/script/includedialog.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#previewBtn").click(function() {
            var qsIterator = $("div.question table");

            var initPage = function () {
                if (qsIterator.length == 1) {
                    $("#previousBtn").attr("disabled", true);
                    $("#nextBtn").attr("disabled", true);
                } else {
                    $("#previousBtn").attr("disabled", true);
                    $("#nextBtn").removeAttr("disabled");
                }

                currentSeq = 1;

                $("#titleList").empty();
                qsIterator.each(function (i) {
                    if (i == 0) {
                        var html1 = "<li name='qsTitle" + $(this).attr("sequence") + "' class='active'>";
                        var html2 = "    <a href='#' onclick='readQsByClickTitle(" + $(this).attr("sequence") + ");'>";
                        var html3 = "        " + $(this).attr("title");
                        var html4 = "    </a>";
                        var html5 = "</li>";
                        var html = html1 + html2 + html3 + html4 + html5;

                        $("#titleList").append(html);
                    } else {
                        var html1 = "<li name='qsTitle" + $(this).attr("sequence") + "' >";
                        var html2 = "    <a href='#' onclick='readQsByClickTitle(" + $(this).attr("sequence") + ");'>";
                        var html3 = "        " + $(this).attr("title");
                        var html4 = "    </a>";
                        var html5 = "</li>";
                        var html = html1 + html2 + html3 + html4 + html5;

                        $("#titleList").append(html);
                    }
                });
            }

            var firstQsId = $("div.question table:first").attr("qsId");

            if (firstQsId == undefined) {
                alert("There is no Pages involved in this Dialog.");
            } else {
                initPage();

                $.get("poe.html", {qsId : firstQsId}, function(data) {
                    $("#preview").show();
                    $("#previewContent").html(data);
                });
            }
        });
    });
</script>


<!--START: conent -->
<div class="content2" id="questions" style="display:none">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>

            <div class="column1">
                <table width="750" border="0" cellspacing="4" class="formlayout_table">
                    <tr>
                        <th width="220"><label>ID:</label></th>
                        <td width="217">${questionnaire.refId}</td>
                        <th width="152"><label>Function:</label></th>
                        <td width="156">${questionnaire.function.code}</td>
                        <th width="152"><label>Locale:</label></th>
                        <td width="156">${questionnaire.locale.code}</td>
                    </tr>
                    <tr>
                        <th><label>Version:</label></th>
                        <td>${questionnaire.version}</td>
                        <th><label>Region:</label></th>
                        <td>${questionnaire.region.code}</td>
                        <th><label>Status:</label></th>
                        <td>${questionnaire.publicationStatus.code}</td>
                    </tr>
                    <tr>
                        <th><label>Name:</label></th>
                        <td>${questionnaire.name}</td>
                         <th><label>Vocabulary Name:</label></th>
                        <td>${questionnaire.vocabularyname}</td>
                        <th><label>Product Line:</label></th>
                        <td colspan="2">
                            ${questionnaire.productType.code}
                        </td>
                    </tr>
                    <tr>
                        <th><label>Title:</label></th>
                        <td colspan="3">${questionnaire.displayTitle}</td>
                    </tr>
                </table>
            </div>

            <ul class="functions1 fun1_3">
                <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                    <li>
                        <a href="#" onclick="${OPERATION}Action('SUBMIT');">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_save.gif" class="btn" />
                        </a>
                    </li>
                    <li>
                        <a href="#" onclick="${OPERATION}Action('SUBMIT_AND_EXIT');">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_save_exit.gif" class="btn" />
                        </a>
                    </li>
                    <li>

                        <a href="list.html?from=cancel&checkSearch=list"><img src="<%=request.getContextPath()%>/images/btn/functions1/btn_cancel.gif"
                                                                 alt="" width="122" height="23" class="btn" />
                        </a>

                    </li>
                    <li>
                        <input type="image" src="<%= request.getContextPath()%>/images/btn/functions1/btn_include_page.gif" class="btn"
                               onclick="$('#include').show();" />
                    </li>
                    <li>
                        <a id="previewBtn" href="#">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_preview.gif" class="btn" />
                        </a>
                    </li>
                </security:authorize>

            </ul>
            <div class="corners_bottom"></div>
        </div>

        <div class="error">
            <h3 id="pagemessage">
                ${pagemessage}

                <c:if test="${empty param.questionSetListMsgBak}">
                    This Dialog contains the following ${fn:length(questionnaire.questionSetsInNaire)}
                    Page${fn:length(questionnaire.questionSetsInNaire) > 1 ? 's' : ''}:
                </c:if>
                ${param.questionSetListMsgBak}
            </h3>
        </div>

        <ul class="functions2">
            <li class="view">
                <a href="#" onclick="clickAction('../questionset/view')">
                    <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_view_light.gif" alt="view" />
                </a>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" onclick="clickAction('../questionset/edit')">
                        <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif" alt="edit" />
                    </a>
                </li>
            </security:authorize>

            <li>
                <a href="#">
                    <img name="qbtn" onclick="remove();" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_remove_light.gif" alt="remove" />
                </a>
            </li>
        </ul>

        <jsp:include page="includePagePopup.jsp" />
 		<table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                <th width="5%"></th>
                <th width="14%">Name</th>
                <th width="12%">ID</th>
                <th width="8%">Version</th>
                <th width="16%">Status/Availability
                </th>
                <th width="45%">
                    Title
                </th>
            </tr>
            <thead>
        </table>
        <div class="question_sets">
            <div class="question_sets_inside">
                <form id="includePages" name="includePages" method="post" eccc="true">
                    <input type="hidden" name="id" value="${param.id}" />
                    <input type="hidden" id="submitAction2" name="submitAction" />

                    <div id="questionSetList" class="question">
                        <c:if test="${empty param.questionSetsBak}">
                            <c:forEach var="qis" items="${questionnaire.questionSetsInNaire}">
                                <table width="100%" border="0" cellpadding="0" cellspacing="0" id="questionSet${qis.questionSet.questionSetId}"
                                       title="${qis.questionSet.displayTitle}" qsId="${qis.questionSet.questionSetId}"
                                       sequence="${qis.sequence}" onclick="itemClick(this, 'id=${qis.questionSet.questionSetId}');">
                                    <tbody>
                                        <tr>
                                            <th width="5%" class="number0">${qis.sequence}</th>
                                            <td width="15%" class="row1">${qis.questionSet.name}</td>
                                            <td width="18%" class="row2">${qis.questionSet.refId}</td>
                                            <td width="8%" class="row2">Ver ${qis.questionSet.version}</td>
                                            <td width="16%" class="row3">
                                                ${qis.questionSet.availability.name}/${qis.questionSet.status.name}
                                            </td>
                                            <td width="31%" class="row4">
                                                ${fn:substring(qis.questionSet.text, 0, 35)}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </c:forEach>
                        </c:if>
                        ${param.questionSetsBak}
                    </div>
                </form>

                <ul class="question_sets_move">
                    <li>
                        <input type="image" name="qbtn" class="btn" onclick="up();"
                               src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_up_light.gif" />
                    </li>
                    <li>
                        <a href="#" onclick="down(); return false;">
                            <img name="qbtn" class="btn" src="<%= request.getContextPath()%>/images/btn/functions2/btn_move_down_light.gif" alt="text" />
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<jsp:include page="poeFrame.jsp" />